<style lang="scss">
  @import "../../../assets/css/variable";

  .search-box {
    position: fixed;
    top: 0;
    padding: $margin-normal;
  }

  .result-list {
    padding: $margin-normal;
    margin-top: 44px;
    overflow: hidden;
  }
</style>
<template>
  <div>
    <div class="search-box position-fixed bg-color-light-gray">
      <searcher v-model="query" @search="search"></searcher>
    </div>
    <div v-if="!query" class="result-list">
      <p class="text-align-center font-header color-light-black">公式查询</p>
      <p class="color-silver">输入关键字可模糊搜索系统内已有的公式，关键字暂时不能分割</p>
    </div>
    <result-list v-else :list="results" class="result-list"></result-list>
  </div>
</template>

<script type="text/babel">

  import Qs from 'qs';

  import Searcher from './components/Searcher.vue';
  import ResultList from './components/ResultList.vue';

  export default {
    data(){
      return {
        query: '',
        results: []
      }
    },
    computed: {},
    methods: {
      search(query){
        if (!query) {
          return;
        }
        this.query = query;
        this.$http.get(ENV.jyUrl + 'formula/query/name?name=' + query)
          .then((response) => {
            this.results = response.data;
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
    components: {
      Searcher,
      ResultList
    }
  };
</script>
